import {useState,useEffect} from 'react'
import styles from './huati.module.css'
import axios from 'axios'
import { NavBar,Search  } from 'react-vant';
import {useNavigate} from 'react-router-dom'
export default function Huati() {
    const navigate = useNavigate()
    const [huati,setHuati] = useState([])
    const [value, setValue] = useState('');
    useEffect(()=>{
        getHuati()
    },[])
    let getHuati = async ()=>{
        let {data}=await axios.get('http://localhost:3000/gethuati')
        console.log(data);
        if(data.code===200){
            setHuati(data.data)
        }
    }
  return (
    <div>
        <NavBar
            title="热门话题"
            leftText="返回"
            onClickLeft={() => navigate('/app/she')}
        />
        <Search value={value} onChange={setValue} clearable placeholder="查找相关话题" />
        <div>
            {
                huati.map((item,index)=>{
                    return(
                        <div className={styles.huati} onClick={()=>navigate('/huati_xiang?id='+item._id)} key={index}>
                            <div className={styles.huati_img}>
                                <p style={{color:'white'}}>{index+1}</p>
                            </div>
                            <div className={styles.huati_title}>
                                <p>#{item.name}</p>
                            </div>
                        </div>
                    )
                })
            }
        </div>
    </div>
  )
}
